<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { Page,useVbenModal, useVbenForm } from '@vben/common-ui';
import { Button, Card, Table, Space, message } from 'ant-design-vue';
import { getExplanationTableData } from '#/api/core/explanation';
import modal from './modal.vue';

defineOptions({ name: 'Explanation' });

const [ModalForm, modalApi] = useVbenModal({
  connectedComponent: modal,
});

function openModal() {
  modalApi.setData({
    content: '外部传递的数据 content',
    payload: '外部传递的数据 payload',
  });
  modalApi.open();
}

const [SearchForm, formApi] = useVbenForm(
  reactive({
    handleSubmit: onSubmit,
    wrapperClass: 'grid-cols-2',
    layout: 'horizontal',
    commonConfig: {
      componentProps: {
        labelWidth: 50,
        class: 'w-full',
      },
      hideRequiredMark: true,
    },
    schema: [
      {
        component: 'VbenInput',
        componentProps: {
          placeholder: '请输入要搜索的key',
        },
        fieldName: 'key',
        label: 'Key',
      },
      {
        component: 'VbenInput',
        componentProps: {
          placeholder: '请输入要搜索的名词',
        },
        fieldName: '名词',
        label: '名词',
      },
    ],
  }),
);

function onSubmit(values: Record<string, any>) {
  message.success({
    content: `values: ${JSON.stringify(values)}`,
  });
}

const dataSource = ref([]);
const tableLoading = ref(false);
const fetchData = async () => {
  try {
    tableLoading.value = true;
    const response = await getExplanationTableData();
    dataSource.value = response.list;
  } catch (error) {
    message.error('数据获取失败');
    console.error(error);
  } finally {
    tableLoading.value = false;
  }
};

onMounted(() => {
  fetchData();
});

const columns = [
  {
    title: '名词',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Key',
    dataIndex: 'vkey',
    key: 'vkey',
  },
  {
    title: '解释',
    dataIndex: 'explanation',
    key: 'explanation',
  },
  {
    dataIndex: 'action',
    key: 'action',
  },
];
</script>

<template>
  <Page description="名词解释的描述内容。。。。。。。。。。" title="名词解释" >
    <ModalForm />
    <Card>
      <SearchForm />
      <Table size="small" :dataSource="dataSource" :columns="columns">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <Space>
              <Button :type="`link`">编辑</Button>
              <Button :type="`link`">删除</Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>
  </Page>
</template>
